<template>
	<view class="page" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="交易记录" backUrl="/pages/my/index"></c-nav-bar>
		<view class="tabs">
			<view :class="tidx==0?'active':''" @tap="changeTab(0)">全部</view>
			<view :class="tidx==2?'active':''" @tap="changeTab(2)">支出</view>
			<view :class="tidx==1?'active':''" @tap="changeTab(1)">收入</view>
		</view>
		<view class="list" v-if="list.length>0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item,index) in list" :key="index">
					<view class="l_ny">{{item.yearMonth}}</view>
					<view class="rl_item" v-for="(pre,idx) in item.list" :key="idx" @tap="toDetails(pre)">
						<view class="rli_l">
							<text class="rlil_text">{{pre.title}}</text>
							<text class="rlil_date">{{pre.createDate}}</text>
						</view>
						<view class="rli_r">
							<text class="rlir_text" :class="[2,4].includes(pre.consumeType)?'rlir_text_cz':'rlir_text_tx'">
								{{[2,4].includes(pre.consumeType)?'+':''}}{{pre.amount}}
							</text>
							<!-- <text class="rlir_money">余额{{pre.afterAmount}}元</text> -->
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<block v-else>
			<NoData/>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				tidx:0,
				flowType:'',
				page:1,
				limit:10,
				finished:false,
				consumeTypes:[],
				orderTypes:[],
				list:[],
				resList:[]
			}
		},
		onLoad() {
			// this.getList();
		},
		methods: {
			async getConsumeType(){
				return new Promise((resolve,reject)=>{
					this.$api.post('/api/dict/getListByTypes',['consume_type']).then(res=>{
						if(res.data.code===0){
							let temp = [];
							res.data.data.forEach(d=>{
								temp.push({
									key:d.dictValue,
									value:d.dictLabel
								});
							})
							resolve(temp);
						}else this.$showModal(res.data.msg);
					})
				})
			},
			async getOrderType(){
				return new Promise((resolve,reject)=>{
					this.$api.post('/api/dict/getListByTypes',['order_type']).then(res=>{
						if(res.data.code===0){
							let temp = [];
							res.data.data.forEach(d=>{
								temp.push({
									key:d.dictValue,
									value:d.dictLabel
								});
							})
							resolve(temp);
						}else this.$showModal(res.data.msg);
					})
				})
			},
			changeTab(idx){
				this.tidx = idx;
				this.flowType = idx==0?'':idx;
				this.init();
			},
			init(){
				this.page = 1;
				this.finished = false;
				this.resList = this.list = [];
				// this.getList();
			},
			async getList(){
				this.consumeTypes = await this.getConsumeType();
				this.orderTypes = await this.getOrderType();
				
				this.$api.get('/api/userWalletInfo/page',{
					page:this.page,
					limit:this.limit,
					flowType:this.flowType
				}).then(res=>{
					if(res.data.code===0){
						let list = res.data.data.list;
						if(list.length==0) this.finished = true;
						else{
							this.page++;
							this.resList = [...this.resList,...list];
						}
						
						let nyList = [];
						this.resList.forEach(d=>{
							let ct = this.consumeTypes.find(c=>c.key==d.consumeType);
							let ot = this.orderTypes.find(c=>c.key==d.orderType);
							let orderType = ot?ot.value:'';
							let exit = ct&&ot&&ot.value.indexOf(ct.value)>-1;
							d.title = exit?orderType:(orderType+(ct?ct.value:''));
							
							let ny = new Date(d.createDate).Format('yyyy年MM月');
							if(!nyList.includes(ny)) nyList.push(ny);
						})
						this.list = [];
						nyList.forEach(l=>{
							this.list.push({
								yearMonth:l,
								list:this.resList.filter(d=>new Date(d.createDate).Format('yyyy年MM月')==l)
							});
						})
					}else this.$showModal(res.data.msg);
				})
			},
			toDetails(item){
				uni.navigateTo({
					url:'/pagesMy/wallet/details?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			scrolltolower(){
				if(this.finished) return
				// this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #ffffff;
		.tabs{
			width: 100%;
			height: 106rpx;
			// background: url(https://i.ringzle.com/file/20231221/3758a14b53664074bd990b31d8a2c7a5.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			&>view{
				width: calc(100% / 3);
				height: 106rpx;
				text-align: center;
				line-height: 106rpx;
				position: relative;
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #111111;
				&.active{
					font-weight: bold;
					color: #007A69;
					&::after{
						content: '';
						width: 68rpx;
						height: 6rpx;
						background: #007A69;
						border-radius: 3rpx;
						position: absolute;
						left: 50%;
						margin-left: -34rpx;
						bottom: 8rpx;
					}
				}
			}
		}
	
		.list{
			width: 100%;
			height: calc(100% - 106rpx);
			overflow-y: auto;
			::v-deep .u-list{
				width: 100%;
				height: 100% !important;
				padding: 0 24rpx;
				box-sizing: border-box;
				.l_ny{
					font-size: 26rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
					padding: 21rpx 0;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				}
				.rl_item{
					width: 100%;
					padding: 28rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					.rli_l{
						display: flex;
						flex-direction: column;
						.rlil_text{
							font-size: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #111111;
						}
						.rlil_date{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #88919D;
							margin-top: 24rpx;
						}
					}
					.rli_r{
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.rlir_text{
							font-size: 36rpx;
							font-family: D-DIN, D-DIN;
							font-weight: bold;
							&.rlir_text_cz{
								color: #FF7D01;
							}
							&.rlir_text_tx{
								color: #111111;
							}
						}
						.rlir_money{
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #88919D;
							margin-top: 20rpx;
						}
					}
				}
			}
		}
	
		.empty{
			width: 100%;
			height: calc(100% - 106rpx);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
		}
	}

	::v-deep .nodatadiv{
		height: auto !important;
		padding-top: 50% !important;
	}
</style>